import React from 'react';
import {
  View,
  Text,
  ScrollView,
  TouchableOpacity
} from 'react-native';

import BasePage from '../common/BasePage';
import TImage from '../../components/TImage';
import SizeUtils from '../../common/SizeUtils';
import Config from '../../config';

export default class VipsercardContentPage extends BasePage {
  constructor(props) {
    super(props);
    this.state = {
      dataSource: [
        {bbWidth:SizeUtils.translateDesignNumToCode(3), imgurl: require("../../../resource/images/vipsercard/lianmeng.png") ,
          width:120, height:120, title:"合作商家", showType:0,
          dsc: "", pageKey: Config.pages.vipactivitypage.key},
        {bbWidth:SizeUtils.translateDesignNumToCode(3), imgurl: require("../../../resource/images/vipsercard/huodong.png") ,
          width:120, height:120, title:"会员活动", showType:1,
          dsc: "", pageKey: Config.pages.vipActivityXianshiPage.key},
        {bbWidth:SizeUtils.translateDesignNumToCode(3), imgurl: require("../../../resource/images/vipsercard/kaika.png") ,
          width:120, height:120, title:"我要办卡",name:"我要办卡",
          dsc: "", pageKey: Config.pages.vipopencardpage.key,config_key:"open_card_config"},
          /*
        {bbWidth:SizeUtils.translateDesignNumToCode(3), imgurl: require("../../../resource/images/vipsercard/lianmeng.png") ,
          width:120, height:120, title:"商务联盟",name:"商务联盟",
          dsc:"", pageKey: Config.pages.guahao_hospital_web.key,config_key:"business_config"},*/
        {bbWidth:SizeUtils.translateDesignNumToCode(0), imgurl: require("../../../resource/images/vipsercard/wenti.png") ,
          width:120, height:120, title:"我有疑问",
          dsc:"", pageKey: Config.pages.vipquestpage.key}]
    }
  }

  _listItemRender(rowData, index){
    return(
      <TouchableOpacity key={index} onPress={() => {
          var pageData = Config.getPageDataByKey(rowData.pageKey);
          this.gotoPage(pageData, {buttonData:rowData});
        }}>
        <View style={{flexDirection:"row", justifyContent: 'space-between', alignItems: 'center',
            borderColor:"#eeeeee", paddingLeft:SizeUtils.translateDesignWidthToCode(40),
            paddingRight:SizeUtils.translateDesignWidthToCode(40),
            borderBottomWidth:rowData.bbWidth,
            width:SizeUtils.getWindowSize().width - SizeUtils.translateDesignWidthToCode(80),
            height:SizeUtils.translateDesignHeightToCode(192)}}>
          <View style={{flexDirection:"row", alignItems:"center"}}>
            <TImage source={rowData.imgurl} style={{width:rowData.width, height:rowData.height}}/>
            <View style={{flexDirection: 'column', paddingLeft:SizeUtils.translateDesignWidthToCode(30)}}>
              <Text style={{fontSize:SizeUtils.translateFontSizeToCode(32), color:"#333333",
                fontWeight:"bold"}}>{rowData.title}</Text>
              <Text style={{fontSize:SizeUtils.translateFontSizeToCode(28)}}>{rowData.dsc}</Text>
            </View>
          </View>
          <TImage source={require("../../../resource/images/common/list_btn_forward.png")}
            style={{width:16, height:28}} />
        </View>
      </TouchableOpacity>
    )
  }

  render() {
    return(
      <View style={{width:SizeUtils.getWindowSize().width,
          height:SizeUtils.getWindowSize().height,
         paddingTop:Config.paddingTop + SizeUtils.translateDesignHeightToCode(20), alignItems: 'center', backgroundColor:"#ffffff"}}>
         {this._renderNavigationBar()}
         <ScrollView style={{
           height:SizeUtils.getWindowSize().height,
           width:SizeUtils.getWindowSize().width - SizeUtils.translateDesignWidthToCode(80),
          }}>
            <View style={{flexDirection: 'column', justifyContent:"flex-end",alignItems: "center",
              backgroundColor:"#ffffff", shadowColor:"#cccccc", shadowOpacity:0.8, shadowOffset:{height:SizeUtils.translateDesignNumToCode(6)},
              shadowRadius:10, paddingTop:SizeUtils.translateDesignHeightToCode(20)}}>
             <TImage source={require("../../../resource/images/vipsercard/huiyuanka.png")}
                style={{width:668, height:336}}/>
             {this.state.dataSource.map(
               (data, index) => {return this._listItemRender(data, index)}
             )}
            </View>
         </ScrollView>
      </View>
    )
  }
}
